<template>
  <div class="analysisTask">
    <userechart
      ref="chart_line_one"
      :options="options"
      :height="height"
      :bordermodel="bordermodel"
      :title="title"
      :iconclass="iconclass"
      :iconcolor="iconcolor"
      :titlecolor="titlecolor"
      :decorationmodel="decorationmodel"
    />
  </div>
</template>

<script>
import userechart from '@/components/echart/index.vue'
export default {
  name: 'radarechart',
  props: [
    'height',
    'tooltip',
    'tooltip_left',
    'series',
    'bordermodel',
    'title',
    'iconclass',
    'iconcolor',
    'titlecolor',
    'decorationmodel'
  ],
  data() {
    return {
      options: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '销售（Sales）', max: 6500 },
            { name: '管理（Administration）', max: 16000 },
            { name: '信息技术（Information Technology）', max: 30000 },
            { name: '客服（Customer Support）', max: 38000 },
            { name: '研发（Development）', max: 52000 },
            { name: '市场（Marketing）', max: 25000 }
          ]
        },
        series: [
          {
            name: '邮件营销',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: '预算分配（Allocated Budget）'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: '实际开销（Actual Spending）'
              }
            ],
            type: 'radar'
          }
        ]
      },
      controlid: ''
    }
  },
  created() {
    this.controlid =
      'div' + Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
  },
  mounted() {
    this.initvalue()
    this.$refs.chart_line_one.initChart()
  },
  watch: {
    tooltip(val) {
      if (val === undefined || val === '') {
        this.options.legend.show = true
      } else {
        this.options.legend.show = val
      }
      this.$refs.chart_line_one.setOption()
    },
    tooltip_left(val) {
      if (val === undefined || val === '') {
        this.options.legend.left = 'left'
      } else {
        this.options.legend.left = val
      }
      this.$refs.chart_line_one.setOption()
    }
  },
  methods: {
    initvalue() {
      this.options.legend.show = this.tooltip
      this.options.legend.left = this.tooltip_left
    }
  },
  components: {
    userechart
  }
}
</script>
